<ion-header class="ion-no-border ion-no-shadow">
	<ion-toolbar>
		<ion-title>{{ 'WALLETS_PAGE.CREATE_WALLET' | translate }}</ion-title>

		<ion-buttons slot="end">
			<ion-button (click)="dismiss()">
				<ion-icon slot="icon-only" name="close"></ion-icon>
			</ion-button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
	<ion-grid class="flex flex-col justify-center items-center text-center">
		<p class="px-5 mb-4">{{ 'PASSPHRASE_TEST.INFO' | translate }}</p>
		<ion-text
			color="medium"
			*ngIf="isDevNet"
			class="w-full px-5 mb-3 text-sm italic"
		>
			<p>{{ 'PASSPHRASE_TEST.DEVNET_WORDS_NOTICE' | translate }}</p>
		</ion-text>
		<form #wordsForm="ngForm" class="w-full">
			<passphrase-input
				#passphrase
				[wordlistLanguage]="wordlistLanguage"
				[passphraseInit]="passphraseInit"
			></passphrase-input>
		</form>
	</ion-grid>
</ion-content>

<ion-footer class="text-center ion-padding ion-no-border ion-no-shadow">
	<ion-button
		(click)="next()"
		[disabled]="!wordsForm.valid || !areAllWordsCorrect()"
	>
		{{ 'NEXT' | translate }}
	</ion-button>
</ion-footer>
